<template>
    <h4>unsername: {{ username }}</h4>
    <h4>age: {{ age }}</h4>
    <slot name="qwe"></slot>
    <button @click="triggerDIYEvent">触发自定义事件</button>
</template>
  
<script>
import { reactive } from "vue";

export default {
    name: "Demo",
    props: ['propA', 'propB'],
    beforeCreate() {
        console.log('--- beforeCreate hook 被调用了 ---');
        console.log(this)
    },
    // setup 函数会在 beforeCreate hook 调用前调用
    setup(props, context) {
        console.log('--- setup 函数被调用了---');
        console.log('props:', props)
        console.log('context:', context)
        const person = reactive({
            username: '张三',
            age: 45
        })

        function triggerDIYEvent(){
            // 触发自定义事件
            context.emit('hello', '王五')
        }
        
        return {
            username: person.username,
            age: person.age,
            triggerDIYEvent
        }
    }
};
</script>
  
<style></style>
  